<template>
  <div class="page-container">
    <div class="indexPage">
      <div class="indexPage-left">
        <el-form
          ref="form"
          class="query-more-form"
          :model="query"
          label-width="100px"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="sourceCode" label="来源类型">
                <el-select
                  ref="sourceCode"
                  v-model="query.sourceCode"
                  class="w-100"
                  placeholder="所有"
                >
                  <el-option
                    v-for="item in SourceTypeArr"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="" label="上报人">
                <el-input v-model="query.reportName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="" label="上报人电话">
                <el-input v-model="query.reportTel" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="title" label="案件标题">
                <el-input v-model="query.title" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="type" label="案件类型">
                <el-select
                  class="w-100"
                  v-model="query.type"
                  placeholder="所有"
                >
                  <el-option
                    v-for="item in caseType"
                    :key="item.id"
                    :label="item.value"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="mergeCaseCode" label="并案号">
                <el-input v-model="query.mergeCaseCode" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="level" label="紧急级别">
                <el-select class="w-100" v-model="query.level">
                  <el-option
                    v-for="item in levelArr"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="secrecy" label="保密级别">
                <el-select class="w-100" v-model="query.secrecy">
                  <el-option
                    v-for="item in secrecyArr"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="sensitiveLevel" label="敏感级别">
                <el-select class="w-100" v-model="query.sensitiveLevel">
                  <el-option
                    v-for="item in sensitiveLevelArr"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="categoryDcaCode" label="所属行业">
                <el-select
                  ref="categoryDcaCode"
                  class="w-100"
                  v-model="query.categoryDcaCode"
                  @change="getCategorySupCode"
                >
                  <el-option
                    v-for="item in categoryDca"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="categorySupCode" label="主类别编码">
                <el-select
                  ref="categorySupCode"
                  class="w-100"
                  v-model="query.categorySupCode"
                  @change="getCategorySubCode"
                >
                  <el-option
                    v-for="item in categorySupCodeArr"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="categorySubCode" label="子类别编码">
                <el-select
                  ref="categorySubCode"
                  class="w-100"
                  v-model="query.categorySubCode"
                >
                  <el-option
                    v-for="item in categorySubCodeArr"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item prop="addressCity" label="所属市">
                <el-select
                  ref="addressCity"
                  class="w-100"
                  size="small"
                  v-model="query.addressCity"
                  placeholder="所有"
                  @change="levelArea1Change"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in regionArr"
                    :key="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="addressStreet" label="所属街道">
                <el-select
                  ref="addressStreet"
                  class="w-100"
                  size="small"
                  v-model="query.addressStreet"
                  @change="levelArea2Change"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in StreetArr"
                    :key="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="addressCommunity" label="所属社区">
                <el-select
                  ref="addressCommunity"
                  class="w-100"
                  size="small"
                  v-model="query.addressCommunity"
                  placeholder="所有"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in CommunityArr"
                    :key="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="addressDetailedStandard" label="地址">
                <el-input
                  size="small"
                  v-model="query.addressDetailedStandard"
                  class="search-ipt-address"
                  placeholder="请输入地址"
                >
                  <el-button slot="append" @click="locationPosition"
                    >定位</el-button
                  >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="content" label="案件描述">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="query.content"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 文件上传 -->
        <div class="fileUpload">
          <UploadFile ref="uploadFile" @pushFile="pushFile" :files="fileList" />
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="文件名"> </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="size" label="大小"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="indexPage-right">
        <div id="map" style="width: 100%; height: 100%" />
      </div>
    </div>
    <!-- 下面的两个按钮 -->
    <div class="bottomBtn">
      <el-button type="primary" @click="caseRegistration">案件登记</el-button>
      <el-button type="primary">历史工单</el-button>
    </div>
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import { categoryType, region, report, industryArea } from "@/api/case";
import UploadFile from "@/components/UploadFile";

export default {
  name: "PendingMattersPage",
  components: {
    Pagination,
    SearchPanel,
    UploadFile,
  },
  data() {
    return {
      SourceTypeArr: [], //来源类型得下拉框
      // 案件类型下拉
      caseType: [],
      // 紧急级别下拉
      levelArr: [
        { id: 0, value: "普通" },
        { id: 1, value: "紧急" },
        { id: 2, value: "特急" },
      ],
      // 保密级别下拉
      secrecyArr: [
        { id: 0, value: "不保密" },
        { id: 1, value: "保密" },
      ],
      // 敏感等级下拉
      sensitiveLevelArr: [
        { id: 0, value: "正常" },
        { id: 1, value: "低俗谩骂" },
        { id: 2, value: "政治敏感" },
        { id: 3, value: "暴恐违禁" },
      ],
      // 所属行业下拉
      categoryDca: [],
      // 主类下拉
      categorySupCodeArr: [],
      // 子类下拉
      categorySubCodeArr: [],
      regionArr: [], //所属区域下拉框
      StreetArr: [], //所属街道的下拉框
      CommunityArr: [], //所属社区的下拉框
      query: {
        title: "",
        //来源类型
        sourceCode: "",
        sourceName: "",
        reportName: "",
        reportTel: "",
        // 市
        addressCity: "",
        // 街道
        addressStreet: "",
        // 社区
        addressCommunity: "",
        industry: "",
        bigClass: "",
        smallClass: "",
        content: "",
        addressDetailedStandard: "",
        material: "",
        longitude: "",
        dimension: "",
        addressCity: "",
        addressCommunity: "",
        // 工单类型
        type: "",
        // 并案号
        mergeCaseCode: "",
        // 紧急级别
        level: "",
        // 保密级别
        secrecy: "",
        // 敏感级别
        sensitiveLevel: "",
        // 所属行业
        categoryDcaCode: "",
        categoryDcaName: "",
        // 主类别编码
        categorySupCode: "",
        categorySupName: "",
        // 子类别编码
        categorySubCode: "",
        categorySubName: "",
        // 文件
        attachments: [],
      },
      fileList: "",
      tableData: [],
      map: "",
    };
  },
  created() {
    // 调用来源类型的接口
    this.getSourceMessage();
    // 调用所属区域的接口
    this.getRegion(1);
    this.getCategoryDcaCode();
  },
  methods: {
    // 所属行业
    getCategoryDcaCode() {
      industryArea({ parentId: 0 })
        .then((res) => {
          this.categoryDca = res.rows;
        })
        .catch(() => {});
    },
    // 获取主类编码
    getCategorySupCode(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.categorySupCodeArr = res.rows;
        })
        .catch(() => {});
    },
    // 获取子类编码
    getCategorySubCode(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.categorySubCodeArr = res.rows;
        })
        .catch(() => {});
    },
    // 获取所属区域
    getRegion(levelId) {
      region({
        level: levelId,
      })
        .then((result) => {
          let { rows } = result;
          this.regionArr = rows;
        })
        .catch({});
    },

    // 所属区域的change事件
    levelArea1Change(val) {
      region({
        parentCode: val,
        level: 2,
      })
        .then((result) => {
          let { rows } = result;
          this.StreetArr = rows;
        })
        .catch({});
    },

    // 所属街道的change事件
    levelArea2Change(val) {
      region({
        parentCode: val,
        level: 5,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.CommunityArr = rows;
        })
        .catch({});
    },

    // 获取定位信息
    locationPosition() {
      let self = this;
      //创建地址解析器实例
      var myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(this.query.addressDetailedStandard, function (point) {
        if (point) {
          self.query.longitude = point.lng;
          self.query.dimension = point.lat;
          self.map.clearOverlays();
          self.map.centerAndZoom(point, 16);
          self.map.addOverlay(new BMap.Marker(point));
        } else {
          self.$message.error("您选择的地址没有解析到结果！");
        }
      });
    },

    // 上传文件拼接表格
    pushFile(file) {
      this.tableData.push({
        name: file.name,
        size: file.size,
        status: file.status,
      });
    },
    // 案件登记
    caseRegistration() {
      this.$refs["form"].validate((valid) => {
        this.query.sourceName = this.$refs.sourceCode.selectedLabel;
        this.query.categoryDcaName = this.$refs.categoryDcaCode.selectedLabel;
        this.query.categorySupName = this.$refs.categorySupCode.selectedLabel;
        this.query.categorySubName = this.$refs.categorySubCode.selectedLabel;
        this.query.addressCity = this.$refs.addressCity.selectedLabel;
        this.query.addressStreet = this.$refs.addressStreet.selectedLabel;
        this.query.addressCommunity = this.$refs.addressCommunity.selectedLabel;
        const files = this.$refs.uploadFile.getFiles();
        files.forEach((item) => {
          this.query.attachments.push({
            name: item.name,
            path: item.path,
            url: item.url,
          });
        });
        report(this.query)
          .then((res) => {
            this.$message.success("上报成功");
            this.clearData();
          })
          .catch(() => {
            this.$message.error("上报失败");
          });
      });
    },
    
    // 清空表单
    clearData() {
      this.$refs["form"].clearValidate();
      this.query = {
        title: "",
        //来源类型
        sourceCode: "",
        sourceName: "",
        reportName: "",
        reportTel: "",
        // 市
        addressCity: "",
        // 街道
        addressStreet: "",
        // 社区
        addressCommunity: "",
        industry: "",
        bigClass: "",
        smallClass: "",
        content: "",
        addressDetailedStandard: "",
        material: "",
        longitude: "",
        dimension: "",
        addressCity: "",
        addressCommunity: "",
        // 工单类型
        type: "",
        // 并案号
        mergeCaseCode: "",
        // 紧急级别
        level: "",
        // 保密级别
        secrecy: "",
        // 敏感级别
        sensitiveLevel: "",
        // 所属行业
        categoryDcaCode: "",
        categoryDcaName: "",
        // 主类别编码
        categorySupCode: "",
        categorySupName: "",
        // 子类别编码
        categorySubCode: "",
        categorySubName: "",
      };
    },

    // 获取来源信息
    getSourceMessage() {
      categoryType({
        sysGroup: "caseSource",
      })
        .then((result) => {
          let { rows } = result;
          this.SourceTypeArr = rows;
        })
        .catch({});
      categoryType({
        sysGroup: "caseType",
      })
        .then((result) => {
          let { rows } = result;
          this.caseType = rows;
        })
        .catch({});
    },

    handleClick(row) {
      console.log(row);
    },
  },
  // 初始化地图
  mounted() {
    // 百度地图API功能
    this.map = new BMap.Map("map"); // 创建Map实例
    this.map.centerAndZoom("崇州市", 14); // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    this.map.addControl(
      new BMap.MapTypeControl({
        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
      })
    );
    this.map.enableScrollWheelZoom(true);
    let self = this;
    this.map.addEventListener("click", function (e) {
      self.map.clearOverlays();
      const point = new BMap.Point(e.point.lng, e.point.lat);
      self.query.longitude = e.point.lng;
      self.query.dimension = e.point.lat;
      var marker = new BMap.Marker(point);
      self.map.addOverlay(marker);
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents;
        self.query.addressDetailedStandard =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.el-tabs.pending-matters-tabs.el-tabs--top {
  padding: 0px 10px;
}
.indexPage {
  display: flex;
}
.indexPage-left {
  width: 70%;
  padding-right: 100px;
}
.indexPage-right {
  width: 30%;
  background: skyblue;
}
// 文件上传
.fileUpload {
  box-sizing: border-box;
  margin-top: 50px;
}

// 底部两个按钮
.bottomBtn {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
